<template>
	<view class="popup-coupon-content">
		<view class="tab">
			<view class="tab-item" @click="handleClickSelectType(1)" :class="selecType == 1 ? 'active' : ''">
				<view class="tab-text">
					未使用
				</view>
			</view>
			<view class="tab-item" @click="handleClickSelectType(2)" :class="selecType == 2 ? 'active' : ''">
				<view class="tab-text">
					已使用
				</view>
			</view>
			<view class="tab-item" @click="handleClickSelectType(3)" :class="selecType == 3 ? 'active' : ''">
				<view class="tab-text">
					已过期
				</view>
			</view>
		</view>
		<view class="coupon-list">
			<s-skeleton type="list" :loading="loading3"></s-skeleton>
			<view class="coupon-card" @click="handClickCoupon(item)" v-for="item in couponList" :key="item.id">
				<view class="card-content">
					<view class="amount-content" :class="[`status${item.coupon_type}`]">
						<view class="amount">
							<view class="price">{{item.coupon_type == 3 ? item.coupon_type_text : Number(item.price)}}</view>
							<text>{{item.coupon_type == 1 ? '元' : item.coupon_type == 2 ? '折' : ''}}</text>
						</view>
						<view class="amount-text">
							{{item.coupon_type_text}}
						</view>
					</view>
					<view class="coupon-info">
						<view class="info-name">
							{{item.name}}
						</view>
						<view class="info-time">
							{{item.store_id_text}}
						</view>
						<view class="info-time">
							{{$wanlshop.timeToDate(item.starttime,2)}}~{{$wanlshop.timeToDate(item.endtime,2)}}
						</view>
					</view>
				</view>

				<view class="coupon-desc" :class="[`status${item.coupon_type}`]">
					<text>{{item.is_use_text}}</text>
					<view @tap="useCoupon(item)" v-if="selecType == 1">立即使用</view>
				</view>
			</view>
			<s-empty v-if="couponList && couponList.length == 0"></s-empty>
			<uni-load-more v-if="couponList && couponList.length > 0" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 1,
				couponList: null,
				loading3: true,
				selecType: 1,
				code: '',
				useNum: {
					available: 0,
					notavailable: 0,
				},

				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				}
			}
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			async loadData() {
				let res = await this.$api.getUserCouponLists({
					page: this.current_page,
					status: this.selecType
				});
				uni.stopPullDownRefresh();
				if (res.code == 1) {
					this.couponList = this.reload ? res.data.data : (this.couponList || []).concat(res.data
					.data); //数据 追加
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
					this.loading3 = false;
				}
			},

			/**
			 * 切换优惠券类别
			 */
			handleClickSelectType(type) {
				this.selecType = type
				this.current_page = 1;
				this.reload = true;
				this.loading3 = true;
				this.loadData();
			},
			handClickCoupon(item) {

			},
			useCoupon() {
				this.$wanlshop.auth('/pages/restaurant/index/shopping?t=2')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-coupon-content {
		font-size: 24rpx;

		&.page {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			flex-direction: column;
		}

		.input {
			margin-top: 20rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;

			.popup-content-input {
				border-radius: 70rpx;
				background: #f7f8fa;
				padding: 0 20rpx;
				flex: 1;
				height: 70rpx;
				margin-right: 20rpx;
			}

			.text {
				color: #FA802A;
				font-size: 28rpx;
				opacity: 0.8;

				&.hasValue {
					opacity: 1;
				}
			}
		}

		.tab {
			display: flex;
			align-items: center;
			background: #fff;
			// box-shadow: 0 12rpx 24rpx -24rpx #969799;
			position: fixed;
			// top: 0;
			left: 0;
			width: 100%;
			.tab-item {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #646566;

				.tab-text {
					display: inline-block;
					padding: 20rpx 0;
				}
			}

			.active {
				color: #FA802A;

				.tab-text {
					border-bottom: 2px solid #FA802A;
				}
			}
		}

		.coupon-list {
			margin-top: 4rpx;
			background: #f6F7F9;
			min-height: 340rpx;
			flex: 1;
			padding: 20rpx 0;
			overflow-y: scroll;
			padding-top: 90rpx;
			.coupon-card {
				margin: 0rpx 20rpx 20rpx;
				background: #fff;
				border-radius: 20rpx;
				padding: 10rpx 20rpx 0 20rpx;

				.card-content {
					display: flex;
					margin: 30rpx 0;

					.amount-content {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 0 10rpx;
						width: 260rpx;

						&.status1 {
							color: #e35319;
						}

						&.status2 {
							color: #6bb44f;
						}

						&.status3 {
							color: #4483fc;
						}

						.amount {
							display: flex;
							align-items: flex-end;

							text {
								margin-bottom: 10rpx;
							}

							.price {
								font-weight: 500;
								font-size: 54rpx;
								margin-right: 4rpx;
							}
						}

						.amount-text {
							margin-top: 4rpx;
						}
					}

					.coupon-info {
						flex: 1;
						color: #323233;
						margin-left: 20rpx;

						.info-name {
							font-size: 30rpx;
							font-weight: 500;
						}

						.info-time {
							margin-top: 10rpx;
							font-size: 26rpx;
						}
					}
				}

				.coupon-desc {
					border-top: 1px dashed #ebedf0;
					padding: 20rpx;
					color: #888;
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						border: 1px solid transparent;
						border-radius: 50rpx;
						padding: 10rpx 20rpx;
					}

					&.status1 {
						view {
							border-color: #e35319;
							color: #e35319;
						}
					}

					&.status2 {
						view {
							border-color: #6bb44f;
							color: #6bb44f;
						}
					}

					&.status3 {
						view {
							border-color: #4483fc;
							color: #4483fc;
						}
					}
				}
			}

			.coupon-card:last-of-type {
				margin-bottom: 0;
			}

		}

		.button-cancel {
			margin: 20rpx;
			height: 80rpx;
			background: #FA802A;
			border-radius: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
</style>